<template>
  <div id="form-create">
    <el-form-item :label="form.label">
      <el-input
        v-if="form.type === 'text'"
        :type="form.type"
        v-model="form.value"
        :name="form.name"
        :placeholder="form.placeholder"
        :disabled="form.disabled"
        :show-word-limit="form['show-word-limit']"
        :maxlength="form.maxlength"
        :minlength="form.minlength"
        @change="changeForm"
      ></el-input>

      <el-input
        v-if="form.type === 'password'"
        :type="form.type"
        v-model="form.value"
        :name="form.name"
        :placeholder="form.placeholder"
        :disabled="form.disabled"
        :show-password="form['show-password']"
        @change="changeForm"
      ></el-input>

      <el-input
        v-if="form.type === 'textarea'"
        :type="form.type"
        v-model="form.value"
        :name="form.name"
        :placeholder="form.placeholder"
        :show-word-limit="form['show-word-limit']"
        :maxlength="form.maxlength"
        :minlength="form.minlength"
        :resize="form.resize"
        :autosize="form.autosize"
        :disabled="form.disabled"
        @change="changeForm"
      ></el-input>

      <el-select
        v-if="form.type === 'select'"
        v-model="form.value"
        :clearable="form.clearable"
        :disabled="form.disabled"
        :placeholder="form.placeholder"
        @change="changeForm"
      >
        <el-option
          v-for="item in form.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-cascader
        v-if="form.type === 'cascader'"
        v-model="form.value"
        :placeholder="form.placeholder"
        :options="form.options"
        :filterable="form.filterable"
        :clearable="form.clearable"
        @change="changeForm"
      ></el-cascader>

      <el-date-picker
        v-if="form.type === 'date'"
        v-model="form.value"
        :type="form.datetype"
        :placeholder="form.placeholder"
        :format="form.format"
        @change="changeForm"
      >
      </el-date-picker>

      <!-- :on-preview  :on-remove-->
      <el-upload
        v-if="form.type === 'file'"
        :limit="form.limit"
        :action="form.action"
        :file-list="form.fileList"
        :multiple="form.multiple"
        :accept="form.accept"
        :auto-upload="false"
        :on-change="handleFileChange"
        :on-remove="handleFileChange"
        @change="changeForm"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <div slot="tip" class="el-upload__tip">{{ form.tip }}</div>
      </el-upload>

      <el-upload
        ref="pictureUpload"
        v-if="form.type === 'img'"
        :action="form.action"
        list-type="picture-card"
        :file-list="form.fileList"
        :multiple="form.multiple"
        :accept="form.accept"
        :auto-upload="false"
        :on-change="handleImgChange"
      >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              class="el-upload-list__item-delete"
              @click="handlePictureCardRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <el-dialog v-if="form.type === 'img'" :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'form-create',
  props: {
    item: {
      type: Object,
      // 是否必填
      required: true
    }
  },
  data () {
    return {
      form: this.item,
      // form: {
      //   // label: '标题',
      //   // label: '标题',
      //   // name: 'form-child',
      //   // value: '',
      //   // disabled: false

      //   // type: 'text',
      //   // placeholder: '提示',
      //   // minlength: false,
      //   // maxlength: false,
      //   // 'show-word-limit': true

      //   // type: 'password',
      //   // 'show-password': true

      //   // type: 'textarea',
      //   // maxlength: 200,
      //   // 'show-word-limit': true,
      //   // resize: 'none',
      //   // autosize: { minRows: 2 }

      //   // type: 'select',
      //   // clearable: true,
      //   // options: [
      //   //   {
      //   //     value: '选项1',
      //   //     label: '黄金糕'
      //   //   },
      //   //   {
      //   //     value: '选项2',
      //   //     label: '双皮奶'
      //   //   },
      //   //   {
      //   //     value: '选项3',
      //   //     label: '蚵仔煎'
      //   //   }
      //   // ]

      //   // type: 'cascader',
      //   // placeholder: '搜索',
      //   // filterable: true,
      //   // clearable: true,
      //   // options: [{
      //   //   value: 'zhinan',
      //   //   label: '指南',
      //   //   children: [{
      //   //     value: 'shejiyuanze',
      //   //     label: '设计原则',
      //   //     children: [{
      //   //       value: 'yizhi',
      //   //       label: '一致'
      //   //     }, {
      //   //       value: 'fankui',
      //   //       label: '反馈'
      //   //     }, {
      //   //       value: 'xiaolv',
      //   //       label: '效率'
      //   //     }, {
      //   //       value: 'kekong',
      //   //       label: '可控'
      //   //     }]
      //   //   }, {
      //   //     value: 'daohang',
      //   //     label: '导航',
      //   //     children: [{
      //   //       value: 'cexiangdaohang',
      //   //       label: '侧向导航'
      //   //     }, {
      //   //       value: 'dingbudaohang',
      //   //       label: '顶部导航'
      //   //     }]
      //   //   }]
      //   // }]

      //   // type: 'date',
      //   // placeholder: '日期选择',
      //   // datetype: 'date', // week month year
      //   // format: 'yyyy-MM-dd' // y M d H(24) h(12) m s

      //   // type: 'file',
      //   // limit: 3,
      //   // action: '',
      //   // fileList: [],
      //   // tip: '选择上传文件，限制数量为3',
      //   // multiple: true
      //   // accept: false

      //   // type: 'img',
      //   // limit: 3,
      //   // action: '',
      //   // fileList: [],
      //   // multiple: true
      //   // accept: false
      // },
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    // 需增加 初始化文件列表 并且增加下载文件功能
    // 需增加 初始化图片列表手
    changeForm () {
      this.$emit('changeForm', this.form)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handlePictureCardRemove (file) {
      const uploadFiles = this.$refs.pictureUpload.uploadFiles
      for (let i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i].url === file.url) {
          uploadFiles.splice(i, 1)
        }
      }
      this.form.fileList = uploadFiles
    },
    handleImgChange (file, fileList) {
      console.log(file)
      console.log(fileList)
      this.form.fileList = fileList
    },
    handleFileChange (file, fileList) {
      console.log(file)
      console.log(fileList)
      this.form.fileList = fileList
    }
  }
}
</script>
<style lang="less">
#form-create {
  .el-textarea .el-input__count {
    line-height: 12px;
  }
  .el-cascader {
    min-width: 250px;
  }
}
</style>
